<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="top">
      <div class="top-title">
        {{ detail.name }}
        <div class="top-title-tag">{{ detail.status }}</div>
      </div>
      <div class="top-item">
        <span class="top-item-label">政策文号：</span>
        <span class="top-item-val">{{
          detail.policyNumber
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">政策级别：</span>
        <span class="top-item-val">{{
          getDictLabel(
            detail.policyLevel,
            policyLevelOptions
          )
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">发文部门：</span>
        <span class="top-item-val">{{
          getDictLabel(
            detail.policyDepart,
            policyDepartOptions
          )
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">政策类型：</span>
        <span class="top-item-val">{{
          getDictLabel(detail.policyType, policyTypeOptions)
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">政策扶持类型：</span>
        <span class="top-item-val">{{
          getDictLabel(
            detail.supportPolicyType,
            supportPolicyTypeOptions
          )
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">产业类型：</span>
        <span class="top-item-val">{{
          getDictLabel(
            detail.industryType,
            industryTypeOptions
          )
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">扶持金额：</span>
        <span class="top-item-val"
          >{{ detail.supportCharge || 0 }} 万元</span
        >
      </div>
      <div class="top-item">
        <span class="top-item-label">申报日期：</span>
        <span class="top-item-val"
          >{{ detail.startTime }} ~
          {{ detail.endTime }}</span
        >
      </div>
      <div class="top-item">
        <span class="top-item-label">发布日期：</span>
        <span class="top-item-val">{{
          detail.publishTime
        }}</span>
      </div>
      <div class="top-item">
        <span class="top-item-label">政策标签：</span>
        <span class="top-item-val"
          >{{ detail.policyTag
          }}{{
            detail.policyTag
              ? `,${detail.policyOtherTag}`
              : detail.policyOtherTag
          }}</span
        >
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-title">政策详情</div>
      <div class="ql-container bottom-content">
        <div
          class="ql-editor"
          v-html="detail.policyContent"
        ></div>
      </div>

      <div class="bottom-title1">政策附件材料</div>
      <div
        class="bottom-none"
        v-if="
          !detail.fileRelList ||
          detail.fileRelList.length === 0
        "
      >
        暂无
      </div>
      <div
        class="bottom-file"
        v-for="(item, index) of detail.fileRelList"
        :key="index"
        @click="downloadFile(item)"
      >
        <i class="el-icon-document"></i> {{ item.fileName }}
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import { queryProjectDetail } from '@/api/PolicyManage'
import { getDictOptions } from '@/utils/dict'
import { getDictLabel } from '@/utils/dict'
import { downloadOneFile } from '@/api/projectRecord'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  props: {
    pkid: String,
    title: String
  },
  components: {
    Breadcrumb
  },
  data() {
    return {
      detail: {
        fileRelList: []
      },
      loading: false,
      policyLevelOptions: [],
      policyDepartOptions: [],
      policyTypeOptions: [],
      supportPolicyTypeOptions: [],
      industryTypeOptions: [],
      policyTagOptions: [
        '荣誉资质',
        '知识产权',
        '科技企业',
        '成果转化',
        '研发机构',
        '营商环境',
        '企业减负',
        '商贸服务',
        '品牌建设',
        '生产服务',
        '其他'
      ]
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  watch: {},
  mounted() {
    this.initOptions()
    this.getDetailInfo()
  },
  methods: {
    getDictLabel,
    async initOptions() {
      const data = await getDictOptions(
        'zhjs_policy_zcjb,zhjs_policy_fwbm,zhjs_policy_zclx,zhjs_policy_fc_zclx,zhjs_policy_cylx'
      )
      this.policyLevelOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_zcjb'
      )[0].resourceDictItems
      this.policyDepartOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_fwbm'
      )[0].resourceDictItems
      this.policyTypeOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_zclx'
      )[0].resourceDictItems
      this.supportPolicyTypeOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_fc_zclx'
      )[0].resourceDictItems
      this.industryTypeOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_cylx'
      )[0].resourceDictItems
    },
    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          this.detail = {
            ...res.data.baseInfo,
            fileRelList: res.data.fileRelList
          }
        }
        this.loading = false
      })
    },
    downloadFile(file) {
      downloadOneFile({ fileId: file.fileId }).then(
        (res) => {
          const blob = new Blob([res]) // 把得到的结果用流对象转一下
          const a = document.createElement('a') // 创建一个<a></a>标签
          a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
          a.download = file.fileName || file.name // 设置文件名
          a.style.display = 'none' // 障眼法藏起来a标签
          document.body.appendChild(a) // 将a标签追加到文档对象中
          a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
          a.remove() // 一次性的，用完就删除a标签
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  .top {
    width: 100%;
    box-sizing: border-box;
    padding: 40px 40px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid #f1f1f1;
    &-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 18px;
      line-height: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #497fa3;
      margin-bottom: 30px;
      &-tag {
        width: 39px;
        height: 21px;
        background: #00ff6c;
        border-radius: 10px;
        margin-left: 12px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &-item {
      width: 50%;
      margin-bottom: 10px;
      &-label {
        font-size: 16px;
        line-height: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #3c3c3c;
      }
      &-val {
        font-size: 16px;
        line-height: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }
    }
  }
  .bottom {
    width: 100%;
    &-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 45px 0 25px 0;
      line-height: 18px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #497fa3;
    }
    &-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 40px;
    }
    &-title1 {
      width: 100%;
      box-sizing: border-box;
      padding: 40px 0 25px 40px;
      font-size: 18px;
      line-height: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3c3c3c;
    }
    &-none {
      width: 100%;
      box-sizing: border-box;
      padding: 0 0 20px 40px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #3c3c3c;
      font-size: 14px;
      line-height: 14px;
    }
    &-file {
      width: 100%;
      box-sizing: border-box;
      padding: 0 0 20px 40px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #3dc3ff;
      font-size: 14px;
      line-height: 14px;
      cursor: pointer;
      i {
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }
}
</style>
